import React, { Component } from "react";

class Box extends Component {
  state = {
    x: 0,
    colors: ["red", "green", "blue"],
  };
  handleClickLeft() {
    this.setState({
      x: this.state.x - 10,
    });
    console.log("click left", this);
  }
  handleClickRight() {
    this.setState({
      x: this.state.x + 10,
    });
    console.log("click right", this);
  }

  render() {
    return (
      <React.Fragment>
        <div style={this.getStyles()}>{this.toString()}</div>
        <button
          onClick={this.handleClickLeft.bind(this)}
          className="btn btn-primary m-2"
        >
          left
        </button>
        <button
          onClick={this.handleClickRight.bind(this)}
          className="btn btn-success m-2"
        >
          right
        </button>
      </React.Fragment>
    );
  }

  getStyles() {
    let styles = {
      width: "50px",
      height: "50px",
      backgroundColor: "lightblue",
      color: "whiter",
      textAlign: "center",
      lineHeight: "50px",
      borderRadius: "5px",
      marginLeft: this.state.x,
    };

    if (this.state.x === 0) {
      styles.backgroundColor = "orange";
    }
    return styles;
  }
  toString() {
    const { x } = this.state;
    return `x:${x}`;
  }
}

export default Box;
